$(document).ready(function() {
	tuto.
	paletteSetup().
	deckSetup().
	panelSetup().
	tsoxaSetup().
	arenaSetup();

	$(window).
	on('resize', function() {
		tuto.deck.domRefresh();
	});
});

var tuto = {
	cardw: 70,
	ndeal: 4,
};

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////@

tuto.paletteSetup = function() {
	var dom;

	$(document.body).
	append(dom = $('<div>').addClass('palette'));

	tuto.
	paletteSizeSetup(dom).
	paletteFamilySetup(dom).
	paletteBackSetup(dom);

	return tuto;
};

tuto.paletteSizeSetup = function(paletteDOM) {
	var dom, pc, w;

	dom = $('<div>').
	addClass('paletteSize').
	on('click', '.filajsCard', tuto.sizeChange).
	appendTo(paletteDOM);

	for (pc = 40; pc <= 140; pc += 20) {
		w = filajs.cardWidth * (pc / 100.0);
		dom.
		append(new filajsCard('C2').
		widthSet(w).
		domCreate().
		domRefresh().
		domGet().
		data('width', w).
		attr('title', 'Set cards\' size to ' + pc + '%'));
		
	}

	return tuto;
};

tuto.paletteFamilySetup = function(paletteDOM) {
	var dom, family, flist = {
		'jfitz':1,
		'classic':1,
		'knoll':1,
		'aguilar':1,
		'ilias':1,
		'nicubunu':1,
		'bordered':1,
		'ornamental':1,
	};

	dom = $('<div>').
	addClass('paletteFamily').
	on('click', '.filajsCard', tuto.familyChange).
	appendTo(paletteDOM);

	for (family in flist) {
		dom.
		append(new filajsCard('DQ').
		widthSet(tuto.cardw).
		familySet(family).
		domCreate().
		domRefresh().
		domGet().
		data('family', family).
		attr('title', 'Set cards\' family to "' + family + '"'));
	}

	return tuto;
};

tuto.paletteBackSetup = function(paletteDOM) {
	paletteDOM.
	append((tuto.back = new filajsCard()).
	backSet(filajs.backGet().filajsBackSwitch()).
	faceDown().
	domCreate().
	widthSet(tuto.cardw).
	domRefresh().
	domGet().
	attr('title', 'Switch cards\' back color').
	on('click', tuto.switchBack));

	return tuto;
};

tuto.sizeChange = function(e) {
	var width;

	e.stopPropagation();

	width = $(this).data('width');

	tuto.deck.
	cardWalk(function() {
		this.
		widthSet(width).
		domRefreshWidth();
	}).
	domRefresh();

	tuto.
	handWalk(function() {
		this.cardWalk(function() {
			this.
			widthSet(width).
			domRefreshWidth();
		});
		this.domRefresh();
	});

	tuto.baza.
	cardWalk(function() {
		this.
		widthSet(width).
		domRefreshWidth();
	}).
	domRefresh();

	tuto.arenaH.
	cardWalk(function() {
		this.
		widthSet(width).
		domRefreshWidth();
	}).
	domRefresh();

	tuto.arenaV.
	cardWalk(function() {
		this.
		widthSet(width).
		domRefreshWidth();
	}).
	domRefresh();
};

tuto.familyChange = function(e) {
	var family;

	e.stopPropagation();

	family = $(this).data('family');

	$('.paletteSize .filajsCard').
	each(function() {
		$(this).
		data('card').
		familySet(family).
		domRefresh();
	});

	tuto.deck.cardWalk(function() {
		this.
		familySet(family).
		domRefreshImage();
	});

	tuto.back.
	familySet(family).
	domRefreshImage();

	tuto.handWalk(function() {
		this.cardWalk(function() {
			this.
			familySet(family).
			domRefreshImage();
		});
	});

	tuto.baza.
	cardWalk(function() {
		this.
		familySet(family).
		domRefreshImage();
	});

	tuto.arenaH.
	cardWalk(function() {
		this.
		familySet(family).
		domRefreshImage();
	});

	tuto.arenaV.
	cardWalk(function() {
		this.
		familySet(family).
		domRefreshImage();
	});
};

tuto.switchBack = function(e) {
	e.stopPropagation();

	$('.paletteSize,.paletteFamily').
	children('.filajsCard').
	each(function() {
		$(this).
		data('card').
		backSwitch().
		domRefresh();
	});

	tuto.deck.
	cardWalk(function() {
		this.
		backSwitch().
		domRefreshImage();
	});

	tuto.handWalk(function() {
		this.cardWalk(function() {
			this.
			backSwitch().
			domRefreshImage();
		});
	});

	tuto.baza.
	cardWalk(function() {
		this.
		backSwitch().
		domRefreshImage();
	});

	tuto.arenaH.
	cardWalk(function() {
		this.
		backSwitch().
		domRefreshImage();
	});

	tuto.arenaV.
	cardWalk(function() {
		this.
		backSwitch().
		domRefreshImage();
	});

	tuto.back.
	backSwitch().
	domRefreshImage();
};

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////@

tuto.deckSetup = function() {
	// Δημιουργούμε την τράπουλα ως χαρτωσιά,

	tuto.deck = new filajsDeck({
		joker: 2,
	}).

	// θέτουμε την κατεύθυνση κάθετης μετατόπισης προς τα κάτω,

	horizontalSet(-1).

	// ακυρώνουμε τον διαχωρισμό ομοιόχρωμων φύλλων,

	asortiOff().

	// με μικρότερο πλάτος απανωτίσματος των φύλλων,

	shiftxSet(0.25).

	// με snapping στο κάτω μέρος του πατρικού div,

	baselineSet('B').

	// και με οριζόντιο κεντράρισμα στο πατρικό div.

	alignmentSet('C').

	// Διατρέχουμε όλα τα φύλλα της τράπουλας και δημιουργούμε
	// DOM element για κάθε φύλλο. Προς το παρόν αυτά τα DOM
	// elements δεν εντάσσονται στο document body.

	cardWalk(function() {
		this.domCreate().domRefresh();
	});

	// Εντάσσουμε το DOM element της τράπουλας σε πατρικό div και
	// αυτό με τη σειρά του στο document body.

	$(document.body).
	append($('<div>').addClass('deck').
	append(tuto.deck.domCreate().domGet()));

	// Το refresh του DOM element της τράπουλας πρέπει να γίνει ΑΦΟΥ ενταχθεί
	// αυτό στο πατρικό DOM element προκειμένου να γίνει ορθά το alignment και
	// το snapping.
	//
	// Παράλληλα, εντάσσονται τα DOM elements των φύλλων της τράπουλας στο
	// document body, καθώς αυτά εντάσσονται στα αντίστοιχα containers, τα
	// οποία με τη σειρά τους εντάσσονται στο DOM element της χαρτωσιάς της
	// τράπουλας.

	tuto.deck.domRefresh();

	// Σε όλα τα containers φύλλων οποιασδήποτε χαρτωσιάς θέτουμε mouse event
	// προκειμένου τα σχετικά DOM elements να μετατοπίζονται ελαφρώς προς την
	// πλευρά της τσόχας όταν περνάμε από πάνω τους τον δείκτη του ποντικιού.
	// Θέτουμε επίσης και mouse click event listener προκειμένου να οδηγείται
	// το container (μαζί με το φύλλο) στην τσόχα και όταν η κίνηση περατωθεί
	// να αποσπάται το container (μαζί με το φύλλο) από τη χαρτωσιά αφετηρίας.

	$(document.body).
	on('mouseenter', '.filajsHandCard', function(e) {
		e.stopPropagation();
		$(this).raiseCard();
	}).
	on('mouseleave', '.filajsHandCard', function(e) {
		e.stopPropagation();
		$(this).lowerCard();
	}).
	on('click', '.filajsHandCard', function(e) {
		e.stopPropagation();
		$(this).parent().
		data('hand').
		cardAnimate($(this).data('index'), tuto.baza);
	});

	return tuto;
};

tuto.panelSetup = function() {
	var panel, dealDOM, cardsDOM, len, i;

	panel = $('<div>').
	addClass('panel').
	appendTo($(document.body));

	$('<div>').
	appendTo(panel).

	append($('<button>').
	text('Reset').
	on('click', function(e) {
		tuto.reset();
	})).

	append($('<button>').
	text('Sort').
	on('click', function(e) {
		tuto.sort();
	})).

	append(tuto.shuffleDOM = $('<button>').
	text('Shuffle').
	on('click', function(e) {
		tuto.shuffle();
	})).

	append($('<button>').
	text('Face up').
	on('click', function(e) {
		tuto.faceSet('faceUp');
	})).

	append($('<button>').
	text('Face down').
	on('click', function(e) {
		tuto.faceSet('faceDown');
	})).

	append($('<button>').
	text('Switch face').
	on('click', function(e) {
		tuto.faceSet('switchFace');
	})).

	append($('<button>').
	text('2-cards').
	on('click', function(e) {
		tuto.baza.
		circleSet(2).
		domRefresh();
	})).

	append($('<button>').
	text('3-cards').
	on('click', function(e) {
		tuto.baza.
		circleSet(3).
		domRefresh();
	})).

	append($('<button>').
	text('4-cards').
	on('click', function(e) {
		tuto.baza.
		circleSet(4).
		domRefresh();
	})).

	append($('<button>').
	text('4-arch').
	on('click', function(e) {
		tuto.baza.
		archSet(4).
		domRefresh();
	})).

	append($('<button>').
	text('3-arch').
	on('click', function(e) {
		tuto.baza.
		archSet(3).
		domRefresh();
	})).

	append($('<button>').
	text('2-arch').
	on('click', function(e) {
		tuto.baza.
		archSet(2).
		domRefresh();
	})).

	append(dealDOM = $('<button>').
	text('Deal').
	on('click', function(e) {
		tuto.deal();
	})).

	append($('<button>').
	text('Undeal').
	on('click', function(e) {
		tuto.undeal();
	}));

	return tuto;
};

tuto.tsoxaSetup = function() {
	var i;

	tuto.tsoxaDOM = $('<div>').
	addClass('tsoxa').
	appendTo($(document.body));

	tuto.hand = {};
	tuto.pektisDOM = {};
	tuto.handDOM = {};

	tuto.thesiWalk(function(thesi) {
		tuto.hand[thesi] = new filajsHand().domCreate();
		tuto.tsoxaDOM.
		append(tuto.pektisDOM[thesi] = $('<div>').
		addClass('pektis pektis' + (thesi % 2 ? 'H' : 'V') + ' pektis' + thesi).
		append(tuto.handDOM[thesi] = $('<div>').addClass('hand hand' + thesi).
		append(tuto.hand[thesi].domGet())));
	});

	tuto.bazaSetup();
	return tuto;
};

tuto.bazaSetup = function() {
	tuto.baza = new filajsHand();

	tuto.baza.
	circleSet(4).
	baselineSet('M').
	alignmentSet('C').
	domCreate().
	domGet().
	appendTo(tuto.tsoxaDOM);

	return tuto;
};

tuto.arenaSetup = function() {
	tuto.arenaH = new filajsHand().
	baselineSet('T').
	alignmentSet('C').
	domCreate();

	tuto.arenaV = new filajsHand().
	verticalSet(-1).
	baselineSet('L').
	alignmentSet('M').
	domCreate();

	$(document.body).
	append($('<div>').attr('id', 'arena').
	append(tuto.arenaHdom = $('<div>').attr('id', 'arenaH').append(tuto.arenaH.domGet())).
	append(tuto.arenaVdom = $('<div>').attr('id', 'arenaV').append(tuto.arenaV.domGet())));

	tuto.deck.domRefresh();
	tuto.arenaH.sort().domRefresh();
	tuto.arenaV.sort().domRefresh();

	tuto.arenaHdom.
	on('click', '.filajsHandCard', function(e) {
		e.stopPropagation();
		tuto.arenaH.cardAnimate($(this).data('index'), tuto.arenaV, {
			sort:true,
			callback: function(hand, idx) {
				tuto.arenaH.domRefresh();
				tuto.arenaV.domRefresh();
			},
			duration: 2000,
		});
	});

	tuto.arenaVdom.
	on('click', '.filajsHandCard', function(e) {
		e.stopPropagation();
		tuto.arenaV.cardAnimate($(this).data('index'), tuto.arenaH, {sort:true});
	});

	return tuto;
};

tuto.sort = function() {
	tuto.deck.
	sort().
	domRefresh();
};

tuto.shuffle = function() {
	tuto.deck.
	shuffle().
	domRefresh();
};

tuto.deal = function() {
	tuto.thesiWalk(function(thesi) {
		tuto.dealPektis(thesi);
		tuto.hand[thesi].domRefresh();
	});

	tuto.arenaH.handPush(tuto.deck.extract(0, tuto.ndeal)).sort().domRefresh();
	tuto.arenaV.handPush(tuto.deck.extract(0, tuto.ndeal)).sort().domRefresh();

	tuto.deck.
	domRefresh();
};

tuto.dealPektis = function(pektis) {
	var hand;

	hand = tuto.hand[pektis];
	hand.handPush(tuto.deck.extract(0, tuto.ndeal)).sort();

	switch (pektis) {
	case 1:
		hand.
		horizontalSet(1).
		alignmentSet('C').
		baselineSet('T', 20);
		break;
	case 2:
		hand.
		verticalSet(-1).
		alignmentSet('M').
		baselineSet('L', 20);
		break;
	case 3:
		hand.
		horizontalSet(-1).
		alignmentSet('C').
		baselineSet('B', 20);
		break;
	case 4:
		hand.
		verticalSet(1).
		alignmentSet('M').
		baselineSet('R', 20);
		break;
	}

	return tuto;
};

tuto.handRefreshDOM = function() {
	var i, hand, dom;

	for (i = 1; i <= 4; i++) {
		hand = tuto.hand[i];
		if (!hand)
		continue;

		dom = hand.domGet();
		if (!dom)
		continue;

		hand.domRefresh();
	}

	return tuto;
}

tuto.undeal = function() {
	tuto.handWalk(function(i) {
		tuto.undealPektis(i);
	});

	tuto.deck.
	handPush(tuto.baza.extract(0, tuto.baza.cardsCount()));

	tuto.deck.
	handPush(tuto.arenaH.extract(0, tuto.arenaH.cardsCount()));

	tuto.deck.
	handPush(tuto.arenaV.extract(0, tuto.arenaV.cardsCount()));

	tuto.baza.
	domRefresh();

	tuto.arenaH.
	domRefresh();

	tuto.arenaV.
	domRefresh();

	tuto.deck.
	domRefresh();

	return tuto;
};

tuto.undealPektis = function(pektis) {
	var hand;

	hand = tuto.hand[pektis];
	tuto.deck.handPush(hand.extract(0, hand.cardsCount()));
	hand.domRefresh();
};

tuto.reset = function() {
	tuto.
	deck.
	sort().
	domRefresh();
}

tuto.faceSet = function(faceSet) {
	$('.paletteSize .filajsCard').
	each(function() {
		$(this).
		data('card')
		[faceSet]().
		domRefresh();
	});

	$('.paletteFamily .filajsCard').
	each(function() {
		$(this).
		data('card')
		[faceSet]().
		domRefresh();
	});

	tuto.deck.
	cardWalk(function() {
		this
		[faceSet]().
		domRefresh();
	});

	tuto.handWalk(function() {
		this.
		cardWalk(function() {
			this
			[faceSet]().
			domRefresh();
		});
	});

	tuto.baza.
	cardWalk(function() {
		this
		[faceSet]().
		domRefresh();
	});

	tuto.arenaH.
	cardWalk(function() {
		this
		[faceSet]().
		domRefresh();
	});

	tuto.arenaV.
	cardWalk(function() {
		this
		[faceSet]().
		domRefresh();
	});
};

tuto.handWalk = function(callback) {
	var i;

	for (i in tuto.hand)
	callback.call(tuto.hand[i], i);

	return tuto;
};

tuto.thesiWalk = function(callback, max) {
	var i;

	if (max === undefined)
	max = 4;

	for (i = 1; i <= max; i++)
	callback(i);

	return tuto;
};
